<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/form-exercise.css"/>
	<body>
		<div id="container">
			<div class="title bottom-border">
				<p>So far so good.Let's talk about your health.</p>
				<p>We use this info to put you in a group with close to your attributes(weird choice of word).</p>
			</div>
			<div class="your-gender bottom-border">
				<span class="left-lable">
					YOUR&nbsp;GENDER
				</span>
				<div class="gender">
					<div class="gender-img">
						<img class="selected" src="img/girl.svg"/>Female
						<img src="img/boy_default.svg"/>Male
					</div>
				</div>
			</div>
			<div class="height-weight bottom-border">
				<span class="left-lable">
					HEIGHT&nbsp;&amp;&nbsp;WEIGHT
				</span>
				<div class="gender">
					<div class="gender-img">
						<input type="text" name="ft" id="ft" />ft.
						<input type="text" name="in" id="in" />in.
						<input type="text" name="lbs" id="lbs" />lbs.
					</div>
				</div>
			</div>
			<div class="family-history bottom-border">
				<span class="left-lable family-history">
					FAMILY&nbsp;&nbsp;HISTORY
				</span>
				<div class="gender family-history">
					<div class="gender-img famliy-right">
						<p>Anyone in your family  have prediabetas?</p>
						<p>Check all that apply.And if you would rather not say,that's okey.</p>
						<div class="parents-siblings">
							<div>✔</div>Parents
							<div></div>Siblings
						</div>
					</div>
				</div>
			</div>
			<div class="family-history bottom-border">
				<span class="left-lable family-history">
					ACTIVITY&nbsp;&nbsp;LEVEL
				</span>
				<div class="gender family-history">
					<div class="gender-img famliy-right">
						<p>How action are you on a weekly basis?</p>
						<div class="activity">
							<img src="img/home.svg"/>
							<img src="img/bike.svg"/>
						</div>
						<div class="activity">
							<div class="div1" >
							</div>
							<div class="div2">
								<p style="font-size: 16px;font-weight: bold;">Not very active</p>
								<p class="p2">Less than 60 minutes of physical activity</p>
							</div>
							<div class="div3" style="position: relative;">
								<div class="div3-div"></div>
							</div>
							<div class="div4">
								<p style="font-size: 16px;font-weight: bold;">Active</p>
								<p class="p2">60+ minutes physical activity</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="diabetes bottom-border">
				<span class="left-lable" style="height: 160px;line-height: 160px;">
					DIABETES
				</span>
				<div class="diabetes-left">
					<div class="diabetes-content">
						<p>Have you been diagnosed with diabetes before?</p>
						<div class="diabetes-content-option">
							<div class="div1" style="position: relative;">
								<div class="div1-option"></div>
							</div>Pre-diabetes
							<div class="div2"></div>Type2
							<div class="div3"></div>Neither
						</div>
					</div>
				</div>
			</div>
			<div class="pregnancy">
				<span class="left-lable" style="height: 160px;line-height: 160px;">
					DIABETES
				</span>
				<div class="diabetes-left">
					<div class="diabetes-content">
						<p>Are you currlently pregnant?</p>
						<div class="diabetes-content-option">
							<div class="div1" style="position: relative;">
								<div class="div1-option"></div>
							</div>Pregnant
							<div class="div2"></div>Not Pregnant
						</div>
					</div>
				</div>
			</div>
			<div class="complete">
				COMPLETE
			</div>
		</div>
	</body>
</html>
